<template>
<div>
  <div>
    <h2 style="color: #ffba00">租约信息</h2>
    <el-button type="primary" @click="dialogVisible=true">添加租房分期通道</el-button>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="jr_product_name" label="产品名称" width="180"></el-table-column>
      <el-table-column prop="company_name" label="资方" width="180"></el-table-column>
      <el-table-column prop="bank_name" label="账户信息"></el-table-column>
      <el-table-column prop="instalment_period" label="分期期限" width="150"></el-table-column>
      <el-table-column prop="repayment_type" label="还款方式">
        <template slot-scope="s">
          <span v-if="s.row.repayment_type==1">按月还款</span>
          <span v-if="s.row.repayment_type==2">按季还款</span>
          <span v-if="s.row.repayment_type==3">按租约周期支付	</span>
        </template>
      </el-table-column>
      <el-table-column prop="credit_line" label="授信额度(%)"></el-table-column>
      <el-table-column prop="del_flg" label="状态">
        <template slot-scope="s">
          <span v-if="s.row.del_flg==0">正常</span>
          <span v-if="s.row.del_flg==1" style="color: #C03639">已作废</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="text" size="small" style="color: #00afff" @click="xiangqing(scope.row)">查看</el-button>
          <el-button v-if="scope.row.del_flg==0" type="text" size="small">修改</el-button>
          <el-button v-if="scope.row.del_flg==1" type="text" size="small" disabled>修改</el-button>
          <el-button v-if="scope.row.del_flg==0" type="text" size="small" @click="zuofei(scope.row)">作废</el-button>
          <el-button v-if="scope.row.del_flg==1" type="text" size="small" disabled>作废</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div>
    <h2 style="color: #ffba00">收房贷</h2>
    <el-button type="primary" @click="dialogVisible2=true">添加收房贷通道</el-button>
    <el-table :data="tableData2" border style="width: 100%">
      <el-table-column prop="jr_product_name" label="产品名称" width="180"></el-table-column>
      <el-table-column prop="company_name" label="资方" width="180"></el-table-column>
      <el-table-column prop="bank_name" label="账户信息"></el-table-column>
      <el-table-column prop="instalment_period" label="分期期限" width="150"></el-table-column>
      <el-table-column prop="repayment_type" label="还款方式">
        <template slot-scope="s">
          <span v-if="s.row.repayment_type==1">按月还款</span>
          <span v-if="s.row.repayment_type==2">按季还款</span>
          <span v-if="s.row.repayment_type==3">按租约周期支付	</span>
        </template>
      </el-table-column>
      <el-table-column prop="credit_line" label="授信额度(%)"></el-table-column>
      <el-table-column prop="del_flg" label="状态">
        <template slot-scope="s">
          <span v-if="s.row.del_flg==1">正常</span>
          <span v-if="s.row.del_flg==0" style="color: #C03639">已作废</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="text" size="small" style="color: #00afff">查看</el-button>
          <el-button v-if="scope.row.del_flg==0" type="text" size="small">修改</el-button>
          <el-button v-if="scope.row.del_flg==1" type="text" size="small" disabled>修改</el-button>
          <el-button v-if="scope.row.del_flg==0" type="text" size="small">作废</el-button>
          <el-button v-if="scope.row.del_flg==1" type="text" size="small" disabled>作废</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div>
    <h2 style="color: #ffba00">应收租约保理</h2>
    <el-button type="primary" @click="dialogVisible3=true">添加租约保理通道</el-button>
    <el-table :data="tableData3" border style="width: 100%">
      <el-table-column prop="jr_product_name" label="产品名称" width="180"></el-table-column>
      <el-table-column prop="company_name" label="资方" width="180"></el-table-column>
      <el-table-column prop="bank_name" label="账户信息"></el-table-column>
      <el-table-column prop="instalment_period" label="分期期限" width="150"></el-table-column>
      <el-table-column prop="repayment_type" label="还款方式">
        <template slot-scope="s">
          <span v-if="s.row.repayment_type==1">按月还款</span>
          <span v-if="s.row.repayment_type==2">按季还款</span>
          <span v-if="s.row.repayment_type==3">按租约周期支付</span>
        </template>
      </el-table-column>
      <el-table-column prop="credit_line" label="授信额度(%)"></el-table-column>
      <el-table-column prop="del_flg" label="状态">
        <template slot-scope="s">
          <span v-if="s.row.del_flg==1">正常</span>
          <span v-if="s.row.del_flg==0" style="color: #C03639">已作废</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="text" size="small" style="color: #00afff" >查看</el-button>
          <el-button v-if="scope.row.del_flg==0" type="text" size="small">修改</el-button>
          <el-button v-if="scope.row.del_flg==1" type="text" size="small" disabled>修改</el-button>
          <el-button v-if="scope.row.del_flg==0" type="text" size="small">作废</el-button>
          <el-button v-if="scope.row.del_flg==1" type="text" size="small" disabled>作废</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

<!--  查看详情-->
  <div>
    <el-dialog title="查看租房分期产品" :visible.sync="xiangqingdig" width="60%" :before-close="xiangqingdigClose">
      <el-form ref="form" :model="xiangqingdigform" label-width="150px">
        <el-form-item label="产品名称">
          <el-input v-model="xiangqingdigform.jr_product_name"></el-input>
        </el-form-item>

        <el-form-item label="资料提供方">
          <el-select v-model="xiangqingdigform.company_name" placeholder="资料提供方">
            <el-option label="请选择" value=""></el-option>
            <el-option label="久金所" value="久金所"></el-option>
            <el-option label="樱花" value="樱花"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="分期期限">
          <el-radio-group v-model="xiangqingdigform.instalment_period">
            <el-radio label="11">11个月</el-radio>
            <el-radio label="23">23个月</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="授信额度">
          <el-input v-model="xiangqingdigform.credit_line"></el-input>
        </el-form-item>

        <el-form-item label="还款方式">
          <el-radio-group v-model="xiangqingdigform.repayment_type">
            <el-radio label="1">按月还款</el-radio>
            <el-radio label="2">按季还款</el-radio>
            <el-radio label="3">按租约周期支付</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="支付PC链接(URL)">
          <el-input v-model="xiangqingdigform.url_pay_pc"></el-input>
        </el-form-item>

        <el-form-item label="支付移动链接(URL)">
          <el-input v-model="xiangqingdigform.url_pay_moble"></el-input>
        </el-form-item>

        <el-form-item label="补全信息PC(URL)">
          <el-input v-model="xiangqingdigform.url_add_detail_info_pc"></el-input>
        </el-form-item>

        <el-form-item label="补全信息移动(URL)">
          <el-input v-model="xiangqingdigform.url_add_detail_info_mobile"></el-input>
        </el-form-item>

        <el-form-item label="App下载(URL)">
          <el-input v-model="xiangqingdigform.url_app_download"></el-input>
        </el-form-item>

        <el-form-item label="账户类型">
          <el-select v-model="xiangqingdigform.account_type" placeholder="账户类型">
            <el-option label="请选择" value=""></el-option>
            <el-option label="对公账户" value="1"></el-option>
            <el-option label="对私账户" value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="申请条件">
          <el-input type="textarea" v-model="xiangqingdigform.application_conditions"></el-input>
        </el-form-item>

        <el-form-item label="风控要求">
          <el-input type="textarea" v-model="xiangqingdigform.risk_requirement"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="xiangqingdig=false">返回</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>

  <div>
    <el-dialog title="添加租房分期产品" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="150px">
        <el-form-item label="产品名称">
          <el-input v-model="form.jr_product_name"></el-input>
        </el-form-item>

        <el-form-item label="资料提供方">
          <el-select v-model="form.company_name" placeholder="资料提供方">
            <el-option label="请选择" value=""></el-option>
            <el-option label="久金所" value="久金所"></el-option>
            <el-option label="樱花" value="樱花"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="分期期限">
          <el-radio-group v-model="form.instalment_period">
            <el-radio label="11">11个月</el-radio>
            <el-radio label="23">23个月</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="授信额度">
          <el-input v-model="form.credit_line"></el-input>
        </el-form-item>

        <el-form-item label="还款方式">
          <el-radio-group v-model="form.repayment_type">
            <el-radio label="1">按月还款</el-radio>
            <el-radio label="2">按季还款</el-radio>
            <el-radio label="3">按租约周期支付</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="支付PC链接(URL)">
          <el-input v-model="form.url_pay_pc"></el-input>
        </el-form-item>

        <el-form-item label="支付移动链接(URL)">
          <el-input v-model="form.url_pay_moble"></el-input>
        </el-form-item>

        <el-form-item label="补全信息PC(URL)">
          <el-input v-model="form.url_add_detail_info_pc"></el-input>
        </el-form-item>

        <el-form-item label="补全信息移动(URL)">
          <el-input v-model="form.url_add_detail_info_mobile"></el-input>
        </el-form-item>

        <el-form-item label="App下载(URL)">
          <el-input v-model="form.url_app_download"></el-input>
        </el-form-item>

        <el-form-item label="账户类型">
          <el-select v-model="form.account_type" placeholder="账户类型">
            <el-option label="请选择" value=""></el-option>
            <el-option label="对公账户" value="1"></el-option>
            <el-option label="对私账户" value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="申请条件">
          <el-input type="textarea" v-model="form.application_conditions"></el-input>
        </el-form-item>

        <el-form-item label="风控要求">
          <el-input type="textarea" v-model="form.risk_requirement"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="addinstall">立即添加</el-button>
          <el-button type="primary" @click="dialogVisible=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</div>
</template>

<script>
import { listinstall, addinstall, listmortgage, listlease, updatedeflg, dataScope, changeRoleStatus } from "@/api/finance/product";

export default {
  data() {
    return {
      xiangqingdig:false,
      xiangqingdigform:{
        jr_product_name: '',
        company_name: '',
        instalment_period: '',
        credit_line: '',
        repayment_type: '',
        url_pay_pc: '',
        url_pay_moble: '',
        url_add_detail_info_pc: '',
        url_add_detail_info_mobile:'',
        url_app_download:'',
        account_type:'',
        application_conditions:'',
        risk_requirement:'',
      },
      tableData: [],
      dialogVisible: false,
      form: {
        jr_product_name: '',
        company_name: '',
        instalment_period: '',
        credit_line: '',
        repayment_type: '',
        url_pay_pc: '',
        url_pay_moble: '',
        url_add_detail_info_pc: '',
        url_add_detail_info_mobile:'',
        url_app_download:'',
        account_type:'',
        application_conditions:'',
        risk_requirement:'',
      },
      tableData2: [],
      dialogVisible2: false,
      form2: {
        jr_product_name: '',
        company_name: '',
        instalment_period: '',
        credit_line: '',
        repayment_type: '',
        url_pay_pc: '',
        url_pay_moble: '',
        url_add_detail_info_pc: '',
        url_add_detail_info_mobile:'',
        url_app_download:'',
        account_type:'',
        application_conditions:'',
        risk_requirement:'',
      },
      tableData3: [],
      dialogVisible3: false,
      form3: {
        jr_product_name: '',
        company_name: '',
        instalment_period: '',
        credit_line: '',
        repayment_type: '',
        url_pay_pc: '',
        url_pay_moble: '',
        url_add_detail_info_pc: '',
        url_add_detail_info_mobile:'',
        url_app_download:'',
        account_type:'',
        application_conditions:'',
        risk_requirement:'',
      },
    }
  },
  methods:{
    /** 查询【请填写功能名称】列表 */
    getList(){
      listinstall().then(response => {
        this.tableData=response;
      });
      listmortgage().then(response => {
        this.tableData2=response;
      });
      listlease().then(response => {
        this.tableData3=response;
      });
    },
    /**
     * 添加租房分期
     */
    addinstall(){
      addinstall(this.form).then(response=>{
        if(response==true){
          this.$message.success("添加租房分期成功")
          this.dialogVisible=false;
          this.getList();
        }else{
          this.$message.error("添加租房分期失败")
          this.dialogVisible=false;
          this.getList();
        }
      })
    },
    /**
     * 修改状态(作废)
     */
    zuofei(row){
      console.log(row.id);
      updatedeflg(row.id).then(response=>{
        if(response==true){
          this.$message.success("修改状态成功")
          this.getList();
        }else{
          this.$message.error("修改状态失败")
          this.getList();
        }
      })
    },
    /**
     * 查看详情
     * @param done
     */
    xiangqing(row){
      this.xiangqingdig=true;
      this.xiangqingdigform.jr_product_name=row.jr_product_name;
      this.xiangqingdigform.company_name=row.company_name;
      this.xiangqingdigform.instalment_period=row.instalment_period;
      this.xiangqingdigform.credit_line=row.credit_line;
      this.xiangqingdigform.repayment_type=row.repayment_type;
      this.xiangqingdigform.url_pay_pc=row.url_pay_pc;
      this.xiangqingdigform.url_pay_moble=row.url_pay_moble;
      this.xiangqingdigform.url_add_detail_info_pc=row.url_add_detail_info_pc;
      this.xiangqingdigform.url_add_detail_info_mobile=row.url_add_detail_info_mobile;
      this.xiangqingdigform.url_app_download=row.url_app_download;
      this.xiangqingdigform.account_type=row.account_type;
      this.xiangqingdigform.application_conditions=row.application_conditions;
      this.xiangqingdigform.risk_requirement=row.risk_requirement;
    },

    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    xiangqingdigClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },

  },
  created() {
    this.getList();
  }
}
</script>

<style scoped>

</style>
